<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        width: 50px;
        height: 50px;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        animation: moveup 1s ease-in forwards;
      }

      @keyframes moveup {
        to {
          opacity: 0;
          transform: translate(-50%, -300%);
        }
      }
    </style>
  </head>
  <body>
    <script>
      var lock = false;
      function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min)) + min;
      }

      window.addEventListener('mousemove', function (e) {
        if (lock) {
          return;
        }

        lock = true;
        setTimeout(function () {
          lock = false;
        }, 20);
        var img = document.createElement('img');
        img.src = './heart.png';
        img.style.left = e.clientX + 'px';
        img.style.top = e.clientY + 'px';
        img.style.width = img.style.height = getRandom(10, 70) + 'px';

        img.style.filter = 'hue-rotate(' + getRandom(0, 360) + 'deg)';

        document.body.appendChild(img);
      });
    </script>
  </body>
</html>
